﻿<style type="text/css">
    .captcha-outer-container {
        background-color: #EEEEEE;
        color: inherit;
        border-radius: 6px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .captcha-outer-container a {
            text-decoration: none;
        }

    .img-refresh-captcha {
        border-radius: 6px;
        padding-top: 5px;
        height: 24px;
        width: 20px;
    }
</style>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '/SuperCaptcha/InitCaptcha',
            type: "GET",
            success: function (data) {
                createImageSrc($('#refresh-captcha'), data[0]);
                createSoundSrc(data[2]);
                createImageSrc($('#img-supercaptcha'), data[1]);
                createImageSrc($('#img-captcha-sound'), data[3]);
            }
        });

        $('#refresh-captcha').click(function () {
            refreshCaptcha();
        });

        $('#img-captcha-sound').click(function () {
            document.getElementById("sound-captcha").play();
        });

        $(document).ajaxSuccess(function (event, xhr, settings) {
            if (settings.url.indexOf("/SuperCaptcha/ValidateCaptcha") > -1) {
                if (xhr.status == 200 && xhr.responseText !== 'true') {
                    var value = xhr.getResponseHeader('X-Captcha-Validation');
                    if (value == "false") {
                        $('#div-captcha-holder input:first-child').val("");
                        refreshCaptcha();
                    }
                }
            }
        });

        $.validator.setDefaults({
            onkeyup: false
        });
    });

    function refreshCaptcha() {
        $.ajax({
            url: '/SuperCaptcha/NewCaptcha',
            type: "GET",
            success: function (data) {
                createSoundSrc(data[1]);
                createImageSrc($('#img-supercaptcha'), data[0]);
            }
        });
    }

    function createImageSrc(element, base64Text) {
        var prefixText = 'data:image/png;base64,';
        $(element).attr('src', prefixText + base64Text);
    }

    function createSoundSrc(base64Text) {
        var prefixText = 'data:audio/mp3;base64,';
        $('#sound-captcha').attr('src', prefixText + base64Text);
    }
</script>

<div class="captcha-outer-container">
    <img id="img-supercaptcha" style="width:100%; height:100%;" />
    <p>Type text below</p>
    <div style="width:100%;">
        <div style="width:70%;" id="div-captcha-holder">
            [TextControl]
        </div>
        <div style="width:30%;">
            <a href="javascript:void(0);" title="Refresh">
                <img alt="Refresh" id="refresh-captcha" class="img-refresh-captcha" />
            </a>   &nbsp;
            <a href="javascript:void(0);" title="Listen">
                <img alt="Listen" id="img-captcha-sound" class="img-refresh-captcha" />
            </a>
            <audio contenteditable="false" controls="controls" id="sound-captcha" style="display:none;"></audio>
        </div>
    </div>
</div>